.thisInputGroup {
  --distance: 0px;
  --color: #999;
  --fontSize: 36px;
  --barLength: 0;
  --errorLength: 0;
  --iptColor: transparent;
  width: 100%;
  min-height: 120px;
  position: relative;

  .thisInput {
    position: absolute;
    box-sizing: border-box;
    padding: 0 20px;
    overflow: hidden;
    width: calc(100% - 40px);
    left: 20px;
    bottom: 0;
    font-size: 36px;
    caret-color: var(--iptColor);
    transition: all 0.3s ease;
  }
  .thisInputPlaceholder {
    position: absolute;
    right: 250px;
    color: red;
  }
  .thisInputOthers {
    .thisLabel {
      position: absolute;
      left: 20px;
      font-size: var(--fontSize);
      bottom: var(--distance);
      color: var(--color);
      transition: all 0.3s ease;
    }
    .bar {
      width: calc(100% - 40px);
      height: 4px;
      border-radius: 4px;
      overflow: hidden;
      position: absolute;
      bottom: 0;
      left: 20px;
      display: flex;
      .barLine {
        height: 2px;
        background: #515151;
      }
      .barLineError {
        background: $--color-error;
        width: var(--errorLength);
        height: 100%;
        transition: all 0.3s ease;
      }
      .barLineLeft {
        background: $--color-brand;
        width: var(--barLength);
        height: 100%;
        transition: all 0.3s ease;
      }
      .barLineRight {
        flex: 1;
      }
    }
  }
}
.focusThisInputGroup {
  animation: highlighterLabel 0.3s ease forwards;
}
.thisInputHasError {
  animation: redLabel 0.3s ease forwards;
}

@keyframes highlighterLabel {
  to {
    --distance: 50px;
    --color: #{$--color-brand};
    --fontSize: 28px;
    --barLength: 100%;
    --iptColor: #515151;
  }
}

@keyframes redLabel {
  from {
    --distance: 50px;
  }
  to {
    --distance: 50px;
    --color: #{$--color-error};
    --fontSize: 28px;
    --barLength: 0;
    --errorLength: 100%;
    --iptColor: #515151;
  }
}

//    .input {
//     font-size: 16px;
//     padding: 10px 10px 10px 5px;
//     display: block;
//     width: 200px;
//     border: none;
//     border-bottom: 1px solid #515151;
//     background: transparent;
//    }

//    .input:focus {
//     outline: none;
//    }

//    label {
//     color: #999;
//     font-size: 18px;
//     font-weight: normal;
//     position: absolute;
//     pointer-events: none;
//     left: 5px;
//     top: 10px;
//     transition: 0.2s ease all;
//     -moz-transition: 0.2s ease all;
//     -webkit-transition: 0.2s ease all;
//    }

//    .input:focus ~ label, .input:valid ~ label {
//     top: -20px;
//     font-size: 14px;
//     color: #5264AE;
//    }

//    .bar {
//     position: relative;
//     display: block;
//     width: 200px;
//    }

//    .bar:before, .bar:after {
//     content: '';
//     height: 2px;
//     width: 0;
//     bottom: 1px;
//     position: absolute;
//     background: #5264AE;
//     transition: 0.2s ease all;
//     -moz-transition: 0.2s ease all;
//     -webkit-transition: 0.2s ease all;
//    }

//    .bar:before {
//     left: 50%;
//    }

//    .bar:after {
//     right: 50%;
//    }

//    .input:focus ~ .bar:before, .input:focus ~ .bar:after {
//     width: 50%;
//    }

//    .highlight {
//     position: absolute;
//     height: 60%;
//     width: 100px;
//     top: 25%;
//     left: 0;
//     pointer-events: none;
//     opacity: 0.5;
//    }

//    .input:focus ~ .highlight {
//     animation: inputHighlighter 0.3s ease;
//    }

//    @keyframes inputHighlighter {
//     from {
//      background: #5264AE;
//     }

//     to {
//      width: 0;
//      background: transparent;
//     }
//    }
